<template>
  <div class="container">
    <yd-navbar title="我的商品">
      <router-link to slot="left">
        <yd-navbar-back-icon
          @click.native="$router.back()"
        ></yd-navbar-back-icon>
      </router-link>
      <span slot="right" style="color:#5c5c5c;font-size:14px;">
        <span @click="$router.push('/business/goodsDetail')">添加</span>
      </span>
    </yd-navbar>
    <yd-infinitescroll :distance="20" :callback="getData" ref="infinitescroll">
      <div class="cplist" slot="list">
        <div class="rmlist">
          <div
            class="remitem"
            v-for="(item, index) in list"
            :key="index"
            @click="
              $router.push({
                path: '/business/goodsDetail',
                query: {
                  id: item.dishesId
                }
              })
            "
          >
            <div class="cpleft">
              <img :src="item.dishesImage" :alt="item.dishesName" />
            </div>
            <div class="cpright">
              <div class="cptitle">
                <span>{{ item.dishesName }}</span>
              </div>
              <div class="cpxq">
                <span>{{ item.goods_synopsis }}</span>
              </div>
              <div class="cpyp">
                <span>月销 {{ item.monthAmount }}</span>
                <span
                  >好评率
                  {{
                    item.praiseRate === '暂无评价'
                      ? '暂无评价'
                      : `${item.praiseRate}%`
                  }}</span
                >
              </div>
              <div class="monsl">
                <div class="mon">
                  <span>￥{{ item.presentPrice }}</span>
                  <span
                    style="text-decoration:line-through;color:#999;font-size:0.25rem"
                    >￥{{ item.dishesPrice }}</span
                  >
                </div>
              </div>
              <div class="zk">
                <span>{{ item.discount }}折</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </yd-infinitescroll>
  </div>
</template>
<script>
import businessMenu from '@/components/business_detail/menu';
import { getBusinessGoods } from '@/api';
export default {
  name: 'shopList',
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      list: []
    };
  },
  components: {
    businessMenu
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      getBusinessGoods({
        pageNum: 1,
        pageSize: 10,
        request: {
          bussinesId: 1
        }
      }).then(res => {
        const { pageNum, totalPages, result } = res.data;

        this.list = [...this.list, ...result];
        console.log(this.list);

        if (result.length < this.pageSize || pageNum >= totalPages) {
          /* 所有数据加载完毕 */
          this.$refs.infinitescroll.$emit('ydui.infinitescroll.loadedDone');
          return;
        }
        /* 单次请求数据完毕 */
        this.$refs.infinitescroll.$emit('ydui.infinitescroll.finishLoad');

        this.pageNum++;
      });
    }
  }
};
</script>
<style lang="less" scoped>
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.cpleft img {
  height: 1.8rem;
  width: 1.8rem;
}

.cplist {
  margin: 0rem;
  background: #fff;
  flex: 1;
  overflow: auto;
}

.rmlist {
  padding: 0.2rem;
}

.remitem {
  display: flex;
  padding: 0.2rem 0;
  &:hover {
    background: #eee;
  }
}

.cpright {
  padding-left: 0.3rem;
  text-align: left;
}

.cptitle {
  font-size: 0.3rem;
  font-weight: bold;
}

.cpyp {
  color: #999;
}

.cpyp span {
  padding-right: 0.3rem;
}

.monsl {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.monsl span {
  font-size: 0.33rem;
  color: red;
  padding-right: 0.15rem;
}

.zk {
  color: rgb(241, 162, 14);
  font-size: 0.3rem;
}
</style>
